<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, height=1330, initial-scale=1, maximum-scale=1">
    <title>商品详情</title>
    <script type="text/javascript" src="../tooljs/jquery.js"></script>
    <script type="text/javascript" src="../js/headModule.js"></script>
    <script type="text/javascript" src="../js/bottomModule.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        /*width: 750px;*/
    }
    div[name="middleModule"]{
        padding-top: 48px;
        padding-bottom: 98px;
        overflow-y: auto;
    }
    div[name="bottomModule"]{
        position: fixed;
        bottom: 0;
        background-color: #ffffff;
    }
    .bottmoItem{
        width: 17.3%;
        float: left;
        height: 100%;
    }
    .bottmoItem img{
        display: block;
        margin-left: 35%;
        margin-top: 10px;
    }
    .bottmoItem span{
        display: block;
        margin-left:25%;
        margin-top:5px;
        font-size: 22px;
    }

    div[name="goodPhoto"] img{
        width: 750px;
        height: 750px;
    }
    #goodName{
        font-size: 32px;
        color: #333333;
        display: block;
        width: 100%;
    }
    #goodItemInfo{
        font-size: 28px;
        color: #fc4747;
        width: 100%;
        display: block;
    }
    #goodPrice{
        font-size: 45px;
        color: #f34b91;
        display: -webkit-inline-flex;
        float: left;
        width: 50%;
    }
    #saleNum{
        font-size: 24px;
        color: #999999;
        display: -webkit-inline-flex;
        float:right;
        width: 50px;
    }
</style>
<body style="width: 750px">
<div name="personalCenterPage">
    <div name="headModule">
    </div>
    <div name="middleModule" style="width: 750px;background-color: #f2f2f3;">
        <div name="goodPhoto" style="width: 750px;height: 750px">
            <img src="../images/hnFBw700X700.jpeg">
        </div>
        <div name="goodInfo" style="height: 256px;width: 750px;background-color: #ffffff;">
            <span id="goodName">古今正品3/4蕾丝上薄下厚挂脖肩带深V聚拢文胸罩内衣女0D809</span>
            <span id="goodItemInfo">力体上托模杯 性感神V领型 附赠挂脖肩带</span>
            <span id="goodPrice">￥79.00</span>
            <span id="saleNum">销量1110</span>
        </div>
        <div name="goodColorSelect" style="height: 80px;width: 100%;margin-bottom: 16px;background-color: #ffffff;">
            <span style="display:block;float: left;margin-top:30px;margin-left: 20px;font-size: 28px;color: #333333">选择颜色分类</span>
            <img src="../images/icons/adress_into@2x.png" style="display: block;float: right;margin-top:30px ;margin-right: 20px">
        </div>
        <div name="discussArea" style="height:480px;width: 100%;background-color: #ffffff;">
            <div name="discussHead" style="height: 80px;width: 100%;font-size: 26px;">
                <span style="display: block;float: left;margin-left: 30px;margin-top: 20px">评论</span>
                <span id="discussNum" style="display: block;float: left;margin-left: 30px;margin-top: 20px">(115)</span>
                <span style="display: block;float: right;margin-left: 30px;margin-top: 20px">好评</span>
                <span id="goodDiscussRate" style="display: block;float: right;margin-left: 30px;margin-top: 20px;color: #eb2840;">90%</span>
                <img src="../images/icons/adress_into@2x.png" style="display: block;float: right;margin-top:20px ;margin-right: 20px">
            </div>
            <div name="discussContext" style="height: 400px;width: 100%;">
                <button style="width: 700px;height: 68px;position:fixed;bottom:10px;font-size: 26px;color: #333333;margin-left: 25px">查看全部评论</button>
            </div>
        </div>
        <div name="goodPhotoAndText" style="width: 100%;">
            <div name="goodPhotoAndTextHead" style="height: 98px;width: 100%;font-size: 26px">
                <span style="display: block;margin-left: 30%;padding-top:30px">向下拖动，查看图文详情</span>
            </div>
            <div name="goodPhotoAndTextContext">
                <img src="../images/hnFBw700X700.jpeg" width="750px" height="750px">
            </div>
        </div>






    </div>
    <div name="bottomModule" style="width: 750px;height: 98px">
        <div name="contact" class="bottmoItem">
            <img src="../images/icons/tab_service@2x.png">
            <span>联系卖家</span>
        </div>
        <div name="shop" class="bottmoItem">
            <img src="../images/icons/shop_store@2x.png">
            <span>店铺</span>
        </div>
        <div name="collection" class="bottmoItem">
            <img src="../images/icons/nav_collection@2x.png">
            <span>收藏</span>
        </div>
        <div name="shopCar" class="bottmoItem">
            <img src="../images/icons/tab_shopping@2x.png">
            <span>购物车</span>
        </div>
        <div name="joinShopCar" style="width: 230px;height: 98px;display: block;float: left;font-size: 32px">
            <button name="joinShopCarBtn" style="background-color: #f34B91;color:#ffffff;width: 230px;height: 98px;font-size: 26px">
                加入购物车
            </button>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var headmodule = headmodal("商品详情","../images/icons/nav_menu@2x.png","../images/icons/nav_news@2x.png","navIcon","chatIcon");
    // document.getElementById("headModule").append(headmodal());
    $('div[name="headModule"]').append(headmodule);
    // var bottommodule = bottomModal("../images/icons/tab_home@2x.png","../images/icons/tab_classify@2x.png","../images/icons/tab_publish@2x.png","../images/icons/tab_information@2x.png","../images/icons/tab_my_sel@2x.png")
    // $('div[name="bottomModule"]').append(bottommodule);
</script>
</html>